<template>
  <div class="partNewsIndex">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack">
    </Header>
    <div class="activityDetail">
      <iframe :src="url" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
      <p class="onlineBtn " :class="{'hasOver':hasOver==1}">
        <span @click.stop="gotoSend">{{ hasOverData[hasOver]}}</span>
      </p>
    </div>
    <Alarm :alarm="alarm" v-if="showAlarm" @cancel="cancel" @confirm="confirm"></Alarm>
  </div>
</template>
<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import Alarm from '../../components/alarm.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        nomoreData:false,
        loadmoreClick:false,
        title:'报名详情',
        url:'',
        hasOver:'',
        hasPost:'',
        showAlarm:false,
        hasOverData:[
            '去报名',
          '已结束',
          '已报名'
        ]
      }
    },
    computed:{
      ...mapState({
        uid:state =>state.app.loginState.uid
      })
    },
    components:{
      Aside:aside,
      Header:header,
      Alarm:Alarm
    },
    methods:{
      cancel(){
        this.showAlarm =false
      },
      confirm(){
        this.showAlarm =false
      },
      gotoSend(){
        this.axios.post('/home/Activity/apply?'+`${this.baseUrl}`,{
          uid:this.uid||localStorage.getItem('uid'),
          act_id:this.id
        })
          .then((res)=>{
            this.showAlarm=true
            this.alarm=res.data.msg
            if(res.data.code==1){
              //报名成功
              // this.hasOverData[0] ='已报名'
                this.hasOver =2
            }
          })
          .catch((res)=>{
              console.log(res.error)
          })
      },
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
      },
      initData(){
          this.axios.get('/home/Article/getActDetail?+'+`${this.baseUrl}`,{
              params:{
                  uid:this.uid||localStorage.getItem('uid'),
                  id:this.id
              }
          }).then((res)=>{
//              console.log(res.data)
          })
            .catch((res)=>{
              console.log(res.error)
            })
      }
    },
    mounted (){
        this.id =this.$route.query.id
      this.url =this.$route.query.url
      this.hasPost =this.$route.query.hasPost
      if(this.$route.query.hasOver ==1){
            //活动已近结束
        this.hasOver =1
      }else {
          if(this.hasPost==1){
          //已报名
            this.hasOver =2
          }else{
            this.hasOver =0
          }
      }

      this.initData()
      $('body').removeClass('active')

    }
  })
</script>
<style scoped="">
  .partNewsIndex{
    width: 100%;
    height: 100%;
  }
  .activityDetail{
    padding: 0 0.32rem;
    margin-top: 1rem;
    margin-top: 0.88rem;
    padding: 0 0.32rem 0.5rem 0.32rem;
    height: 70%;
    font-size: 0;
  }

  .detailTitle{
    font-size: 0.32rem;
    color: #333333;
    text-align: center;
    padding-top: 0.4rem;
    padding-bottom: 0.1rem;
  }
  .detailDate{
    text-align: center;
    font-size: 0.26rem;
    color: #999999;

  }
  .detailContent p{
    text-indent: 2em;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    margin-top: 12px;
  }

  .detailContent .img{
    text-align: center;
    max-width: 100%;
    text-indent: 0;

  }
  .activityZone{
    margin: 0.34rem;
    border: 1px solid #e83329;
    border-radius: 0.15rem;
    padding: 0.3rem 0 0.3rem 0.4rem;
  }
  .activityZone p{
    font-size: 0.26rem;
    color: #333;
    line-height: 1.8;
  }
  .sendBtn{
    text-align: center;
    margin-top: 0.5rem;

    margin-bottom: 0.9rem;
  }
  .sendBtn span {
    display: inline-block;
    font-size: 0.32rem;
    color: white;
    width: 4.5rem;
    height: 0.7rem;
    text-align: center;
    line-height: 0.7rem;
    background: #999999;
    border-radius: 0.32rem;
    -webkit-border-radius: 0.32rem;
    margin-top: 0.7rem;
  }
  .onlineBtn{
    text-align: center;
  }
  .onlineBtn span{
    display: inline-block;
    text-align: center;
    font-size: 0.34rem;
    color: #ffffff;
    background: #e32b2c;
    margin-bottom: 0.1rem;
    width: 4.5rem;
    height: 0.7rem;
    text-align: center;
    line-height: 0.7rem;
    border-radius: 0.32rem;
    -webkit-border-radius: 0.32rem;
    margin-top: 0.7rem;
  }
  .hasOver span{
    background: #999;
  }
</style>
